<template>
  <div class="statistics-view">
    <div v-for="item in data" :key="item.name" class="item">
      <a-statistic
        :value="item.count"
        :precision="0"
        :value-from="0"
        :start="true"
        separator=","
        show-group-separator
        animation
        placeholder="0"
        class="count" />
      <span class="name">{{ item.name }}</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { getAdminApiLicenseOverviewApi } from '@/apis/modules/authBind'

const data = ref([
  { name: '授权数', count: 0, key: 'license_count' },
  { name: '站点数', count: 0, key: 'site_count' },
  { name: '节点数', count: 0, key: 'node_count' }
])
const { request } = useRequest(getAdminApiLicenseOverviewApi, {
  auto: true,
  success(res: any) {
    data.value = data.value.map((item) => {
      return { ...item, count: res[item.key] || 0 }
    })
  }
})
defineExpose({
  request
})
</script>

<style lang="less" scoped>
.statistics-view {
  @apply h-114px flex items-center gap-x-5 justify-between mb-5;
  .item {
    @apply bg-white w-1/3 h-full rounded-3 p-5 flex flex-col gap-y-1;
    box-shadow: 0px 4px 8px 0px rgba(19, 30, 54, 0.06);
    .count {
      @apply h-12;
      :deep(
          .arco-statistic-content
            .arco-statistic-value
            .arco-statistic-value-integer
        ) {
        @apply h-full !text-10/12 font-400;
        font-family: 'BebasNeue';
        background: linear-gradient(
          132deg,
          #226bc5 14.83%,
          #4627de 51.45%,
          #ba84ff 88.07%
        );
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
    .name {
      @apply text-sm/22px;
    }
  }
}
</style>
